<template>
  <div class="main-front-header">
    <header class="main-header" :class="{'dark-bg': calHeader, 'light-bg': !calHeader}">
      <div class="container">
        <router-link class="logo-inner" to="/">
          <span
            class="logo-text"
            :class="{'logo-bg-blue': !calHeader, 'logo-bg-white': calHeader}"></span>
        </router-link>
        <nav role="navigation" class="main-nav clearfix">
          <ul class="nav-list">
            <li class="main-nav-list clearfix">
              <ul v-for="(item, index) in mainNavList" :key="item.path" class="main-nav-list-container">
                <li class="nav-item link-item">
                  <a
                    @click="toAnchor(index)"
                    :class="{
                      'dark-text-color': calHeader,
                      'light-text-color': !calHeader,
                      'active-nav-light': activeNav === index && !calHeader,
                      'active-nav-dark': activeNav === index && calHeader}">
                    {{item.name}}
                  </a>
                </li>
              </ul>
            </li>
            <li class="avatar">
              <button class="btn-register" @click="toRegister">注册</button>
              <button class="btn-login" @click="toLogin">登录</button>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  props: {
    calHeader: {
      type: Boolean,
      default: false
    },
    activeNav: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      mainNavList: [
        {
          path: '/',
          name: '首页'
        },
        {
          path: '/project',
          name: '类脑云OS'
        },
        {
          path: '/filecenter',
          name: '数据集'
        },
        {
          path: '/dataset',
          name: '公开项目'
        }
      ]
    }
  },
  methods: {
    toRegister () {
      window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
    },
    toLogin () {
      this.$router.push({ path: '/login' })
    },
    toAnchor (index) {
      this.$emit('toAnchor', index)
    }
  }
}
</script>

<style scoped lang="stylus">
@import '../../common/stylus/mixin'
@import '../../common/stylus/variable'

.main-front-header
  flex 0 0 auto
  position fixed
  width 100%
  height 68px
  z-index 1000
  transition all linear .8s!important
  .active-nav-light
    color #1787ff!important
  .active-nav-dark
    color #ffffff!important
  .dark-bg
    background #262626
  .light-bg
    background #ffffff
  .main-header
    color #909399
    height 68px
    z-index 200
    box-sizing border-box
    .container
      display flex
      align-items center
      position relative
      max-width 1000px
      margin auto
      height 100%
      .logo-inner
        display inline-block
      .logo-text
        model(107px,21px)
        display inline-block
      .logo-bg-blue
        background-size 107px 21px
        background-image url('../../common/image/icon/bitahub-log-ico-hover.png')
      .logo-bg-white
        background-size 107px 21px
        background-image url('../../common/image/icon/bitahub-log-ico.png')
      .main-nav
        height 100%
        flex 1 0 auto
        .nav-list
          display flex
          align-items center
          height 100%
          margin 0
          justify-content space-between
          position relative
          .avatar
            font-size 14px
            >button
              border-radius 6px
              cursor pointer
              width 63px
              padding 0
              border none
              height 30px
            .btn-register
              background #ECF0F1
              margin-right 13px
              color #333333
              outline none
              &:hover
                background #E0E7E9
            .btn-login
              background #1787FF
              color #ffffff
              outline none
              &:hover
                background #006BDD
          .search
            display flex
            flex 1 1 auto
            padding 0 20px
            justify-content flex-end
            .search-container
              width 200px
          .main-nav-list
            display flex
            height 100%
            padding 0 50px
            .main-nav-list-container
              display flex
              .dark-text-color
                color #AAAAAA
              .light-text-color
                color #24292E
              .nav-item
                padding 0 10px
                font-size 14px
                display flex
                justify-content center
                align-items center
                cursor pointer
                position relative
                margin 0
                >a
                  text-decoration none
                  cursor pointer
                  font-weight 600
                  font-size 16px
                  font-weight 600
                >a:before
                  content ''
                  position absolute
                  top 0
                  right 0
                  bottom 0
                  left 0
              .link-item
                padding 0 20px
                height 100%
            .nav-item.active
              box-shadow inset 0 -2px 0 #3780f7
</style>
